import React, { Component } from 'react'
import { Button, Table, Modal, Form, Input, Upload, message } from 'antd'

import axios from 'axios'

class Gift extends Component {

    constructor(props) {
        super(props)

        this.state = {
            editId: '',  // 修改的记录的 ID
            total: 0,  // 总的记录数
            page: 1,   // 每几页
            page_size: 2,  // 每页的条数
            giftImage: '',
            showDialog: false,  // 是否显示对话框
            data: [],
            columns: [
                {
                    title: '编号',
                    dataIndex: 'id'
                },
                {
                    title: '礼物名称',
                    dataIndex: 'gift_name'
                },
                {
                    title: '价格',
                    dataIndex: 'price',
                    render: record => `￥ ${record} 元`
                },
                {
                    title: '礼物图标',
                    dataIndex: 'gift_icon',
                    render: (record) => <img alt="礼物图标" width="50" src={record} />
                },
                {
                    title: '操作',
                    align: 'center',
                    render: (record) => (
                        <div>
                            <Button onClick={() => { this.edit(record.id) }} size="small">修改</Button>
                            &nbsp;
                            <Button onClick={() => { this.delete(record.id) }} size="small" type="danger">删除</Button>
                        </div>
                    )
                }
            ]
        }
    }

    edit = id => {

        // 根据 id 查询出这条记录（find：从数组中取出数据）
        let data = this.state.data.find(v => v.id === id)

        // 放到表单中
        this.props.form.setFieldsValue({
            gift_name: data.gift_name,
            price: data.price
        })

        // 显示弹出框
        this.setState({
            showDialog: true,
            editId: id,
            giftImage: data.gift_icon
        })
    }

    delete = id => {
        // 弹出确认框
        Modal.confirm({
            title: '确定要删除吗？',
            content: '一旦删除，不能恢复！',
            onOk: () => {
                // 调用接口
                axios.delete('/admin/gifts/' + id).then(res => {
                    if (res.data.ok === 1) {
                        message.success('删除成功！')

                        // 判断是否是当前页的最后一条记录
                        if (this.state.data.length === 1) {
                            // 修改当前页为上一页
                            this.setState({
                                page: this.state.page - 1
                            })
                            // 获取上一页的数据
                            this.getData(this.state.page - 1)
                        } else {
                            // 获取当前页数据
                            this.getData()
                        }


                    } else {
                        message.error(res.data.error)
                    }
                })
            }
        })
    }

    // 在页面显示出来之后调用接口取数据
    componentDidMount() {
        this.getData()
    }

    pageChanged = (page) => {
        console.log(page)
        // 修改当前页码
        this.setState({
            page
        })

        this.getData(page)
    }

    // 获取某一页的数据，如果 page 没有传，就获取当前页的数据
    getData = (page) => {
        // 刷新页面显示新添加的数据
        axios.get(`/admin/gifts?page=${page || this.state.page}&page_size=${this.state.page_size}`).then(res => {
            this.setState({
                data: res.data.data,
                total: res.data.total
            })
        })
    }

    // 图片上传中、上传失败、上传成功时都会被触发
    upload = info => {
        // 上传成功
        if (info.file.status === 'done') {
            // 保存上传的路径保存到 state 中
            this.setState({
                giftImage: info.file.response.data.url
            })
        }

        // 上传失败
        if (info.file.status === 'error') {
            message.error('上传失败，请重试~')
        }
    }

    // 添加按钮
    add = () => {
        this.setState({
            showDialog: true,
            editId: ''
        })
    }

    // 取消按钮
    cancelClicked = () => {

        // 清空表单
        this.props.form.resetFields()

        // 隐藏弹出框
        this.setState({
            showDialog: false,
            giftImage: ''
        })
    }

    // ok 按钮
    okClicked = () => {
        // 验证表单中的数据
        this.props.form.validateFields((err, values) => {
            if (!err) {
                if (this.state.giftImage === '') {
                    message.error('必须要上传图片')
                    return
                }
                // 把图片也加到 values 中
                values.gift_icon = this.state.giftImage

                // 判断是否有 editId
                if (this.state.editId === '') {
                    axios.post('/admin/gifts', values).then(res => {
                        if (res.data.ok === 1) {
                            message.success('添加成功')
                            // 刷新页面显示新添加的数据

                            // 清空表单数据
                            this.props.form.resetFields()

                            // 关闭框并清除图片
                            this.setState({
                                showDialog: false,
                                giftImage: ''
                            })
                        } else {
                            message.error(res.data.error)
                        }
                    })
                } else {
                    axios.put('/admin/gifts/' + this.state.editId, values).then(res => {
                        if (res.data.ok === 1) {
                            message.success('修改成功')

                            this.getData()

                            // 清空表单数据
                            this.props.form.resetFields()

                            // 关闭框并清除图片
                            this.setState({
                                showDialog: false,
                                giftImage: ''
                            })
                        } else {
                            message.error(res.data.error)
                        }
                    })
                }
            }
        })
    }

    render() {

        const { getFieldDecorator } = this.props.form

        return (
            <div>

                <Button type="danger" onClick={this.add}>添加新记录</Button>
                <br /><br />
                <Table
                    rowKey='id'
                    columns={this.state.columns}
                    dataSource={this.state.data}
                    pagination={{
                        onChange: this.pageChanged,
                        total: this.state.total,
                        pageSize: this.state.page_size,
                        current: this.state.page,
                        showTotal: (total, range) => `共有 ${total} 条，当前显示的是第 ${range[0]} 条 ~ ${range[1]} 条`
                    }}
                />
                {/* 添加表单 */}
                <Modal
                    title={this.state.editId === '' ? '添加新记录' : '修改记录'}
                    visible={this.state.showDialog}
                    onOk={this.okClicked}
                    onCancel={this.cancelClicked}
                >
                    <Form>
                        <Form.Item>
                            {
                                getFieldDecorator('gift_name', {
                                    rules: [{
                                        required: true,
                                        message: '礼物名称不能为空'
                                    }]
                                })(
                                    <Input
                                        placeholder="请输入礼物名称"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('price', {
                                    rules: [{
                                        required: true,
                                        message: '礼物价格不能为空'
                                    }, {
                                        pattern: /^\d+(\.\d{1,2})?$/,
                                        message: '礼物价格必须是数字'
                                    }]
                                })(
                                    <Input
                                        prefix="￥"
                                        suffix="元"
                                        placeholder="请输入礼物价格"
                                    />
                                )
                            }
                        </Form.Item>
                    </Form>
                    <Upload
                        listType="picture-card"
                        showUploadList={false}
                        name="file"
                        action="http://118.190.80.166:48002/admin/upload"
                        headers={{
                            Authorization: 'Bearer ' + sessionStorage.getItem('token')
                        }}
                        onChange={this.upload}
                    >
                        {this.state.giftImage === '' ? '上传图片' : <img alt="" style={{ width: '100%' }} src={this.state.giftImage} />}
                    </Upload>
                </Modal>
            </div>
        )
    }
}

export default Form.create()(Gift)